<!doctype html>
<html>
<head>
	<title>DataBind : Example 7</title>
	
	<link href="Styles/static.css" type="text/css" rel="Stylesheet" />
	
	<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.databind.min.js"></script>
		
	<script type="text/javascript">
	    $(document).ready(function() {

            var map = { gender: '#drpGender' };
            var data = {};

            $('#form1').unbinddata(data, map); //Unbind with a map

            //Display json
            var text = '';
            for (var key in data) {
                text += key + ': ' + data[key] + '\r';
            }
            $('textarea').text(text);
	    });
	    
	</script>
	
</head>
<body>

    <form id="form1" action="#">
        <label for="name" >Name</label><input type="text" id="name" value="Adam Smith"/><br />
        <label for="age">Age</label><input type="text" id="age" value="44"/><br />
        <label for="drpGender">Gender</label><select id="drpGender">
            <option value="0">Female</option>
            <option value="1" selected="selected">Male</option>
        </select>
    </form>
		
    <p>
        <textarea cols="20" rows="4"></textarea>
    </p>
		
</body>
</html>
